<template>
    <transition name="slide">
        <div v-if="visible" :class="['message', messageType]">
            {{ message }}
        </div>
    </transition>
</template>
  
<script>
export default {
    data() {
        return {
            visible: false,
            message: '',
            messageType: ''
        };
    },
    methods: {
        showMessage(msg, type) {
            this.message = msg;
            this.messageType = type;
            this.visible = true;
            setTimeout(() => {
                this.visible = false;
            }, 1500); // 消息显示1.5秒后消失
        }
    }
};
</script>
  
<style scoped>
.message {
    /* 基础样式 */
    padding: 10px;
    margin: 10px;
    border-radius: 6px;
    text-align: center;
    position: fixed;
    /* 使用固定定位 */
    top: 5%;
    /* 垂直方向上的中点 */
    left: 50%;
    /* 水平方向上的中点 */
    transform: translate(-50%, -50%);
    /* 向上和向左移动50%的自身宽高，以确保居中 */
    width: 700px;
    /* 设置宽度 */
    background-color: #fff1f1;
    border-radius: 3px;
    padding: 10px 5px;
    z-index: 10000;
}

.success {
    background-color: #59f754de;
    color: white;
}


.error {
    background-color: #ff7777e3;
    color: white;
}

.slide-enter-active,
.slide-leave-active {
    transition: transform 0.5s ease-in-out;
}

.slide-enter-from,
.slide-leave-to {
    transform: translateY(-100%) translateX(-50%);
}

.slide-enter-to,
.slide-leave-from {
    transform: translate(-50%, -50%);
}
</style>
  